<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>查询条件</title>

    <link type="text/css" rel="stylesheet" media="all"
          href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" media="all"
          href="css/main.css"/>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mainDiv" id="query_builder_dir">
    <h2>QueryBuilder静态页面</h2>
    <div class="builder_main" align="center">
        <div class="l_op">
            <div class="btn-group btn-group-xs group_left" data-toggle="buttons">
                <label class="btn btn-primary active">
                    <input type="radio" name="options" autocomplete="off" value="and" checked>并且
                </label>
                <label class="btn btn-primary">
                    <input type="radio" name="options" value="or" autocomplete="off"> 或者
                </label>
            </div>
            <div class="btn-group btn-group-xs group_right" role="group" aria-label="...">
                <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>&nbsp;添加新行</button>
                <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>&nbsp;添加新组</button>
                <button type="button" class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除组</button>
            </div>
        </div>
        <div class="querystmts">
            <div class="sin_con">
                <div class="sin_key">
                    <select id="col" style="cursor:pointer"
                            class="form-control selectpicker bs-select-hidden mobile-device" data-mobile="true">
                        <optgroup label="user1">
                            <option value="user1.id">编号</option>
                            <option value="user1.name">姓名</option>
                        </optgroup>
                        <optgroup label="user2">
                            <option value="user2.id">编号</option>
                            <option value="user2.name">姓名</option>
                        </optgroup>
                    </select>
                </div>
                <div class="sin_connect">
                    <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                            data-mobile="true">
                        <option value="=">等于</option>
                        <option value="!=">不等于</option>
                        <option value="<">小于</option>
                        <option value="<=">小于等于</option>
                        <option value=">">大于</option>
                        <option value=">=">大于等于</option>
                        <option value="between">在..范围之内</option>
                        <option value="not between">不在..范围之内</option>
                        <option value="is null">为null</option>
                        <option value="is not null">不为null</option>
                    </select>
                </div>
                <div class="sin_val">
                    <input class="form-control" placeholder="请输入名称" type="text">
                </div>
                <div class="sin_op">
                    <img src="css/images/2.png" alt="Remove" class="remove"/>
                </div>
            </div>
            <div class="sin_con">
                <div class="sin_key">
                    <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                            data-mobile="true">
                        <optgroup label="user1">
                            <option value="user1.id">编号</option>
                            <option value="user1.name">姓名</option>
                        </optgroup>
                        <optgroup label="user2">
                            <option value="user2.id">编号</option>
                            <option value="user2.name">姓名</option>
                        </optgroup>
                    </select>
                </div>
                <div class="sin_connect">
                    <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                            data-mobile="true">
                        <option value="=">等于</option>
                        <option value="!=">不等于</option>
                        <option value="<">小于</option>
                        <option value="<=">小于等于</option>
                        <option value=">">大于</option>
                        <option value=">=">大于等于</option>
                        <option value="between">在..范围之内</option>
                        <option value="not between">不在..范围之内</option>
                        <option value="is null">为null</option>
                        <option value="is not null">不为null</option>
                    </select>
                </div>
                <div class="sin_val">
                    <span class="fir_span"><input class="form-control" placeholder="请输入最小值" type="text"></span>
                    <span class="con_span">--</span>
                    <span class="sec_span"><input class="form-control" placeholder="请输入最大值" type="text"></span>
                </div>
                <div class="sin_op">
                    <img src="css/images/2.png" alt="Remove" class="remove"/>
                </div>
            </div>
        </div>
        <!--<div class="op_add">-->
            <!--&lt;!&ndash;<img  class="add" style="cursor:pointer" src="css/images/add.gif" alt="添加新行">&ndash;&gt;-->
            <!--<span class="label label-primary">添加新行</span>-->
            <!--<span class="label label-success">新组</span>-->
        <!--</div>-->
        <div class="builder_main">
            <div class="l_op">
                <div class="btn-group btn-group-xs group_left" data-toggle="buttons">
                    <label class="btn btn-primary active">
                        <input type="radio" name="options" autocomplete="off" value="and" checked>并且
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="options" value="or" autocomplete="off"> 或者
                    </label>
                </div>
                <div class="btn-group btn-group-xs group_right" role="group" aria-label="...">
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>&nbsp;添加新行</button>
                    <button type="button" class="btn btn-info"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>&nbsp;添加新组</button>
                    <button type="button" class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除组</button>
                </div>
            </div>
            <div class="querystmts">
                <div class="sin_con">
                    <div class="sin_key">
                        <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                                data-mobile="true" onchange="changeSelect(this)">
                            <optgroup label="user1">
                                <option value="user1.id">编号</option>
                                <option value="user1.name">姓名</option>
                            </optgroup>
                            <optgroup label="user2">
                                <option value="user2.id">编号</option>
                                <option value="user2.name">姓名</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="sin_connect">
                        <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                                data-mobile="true">
                            <option value="=">等于</option>
                            <option value="!=">不等于</option>
                            <option value="<">小于</option>
                            <option value="<=">小于等于</option>
                            <option value=">">大于</option>
                            <option value=">=">大于等于</option>
                            <option value="between">在..范围之内</option>
                            <option value="not between">不在..范围之内</option>
                            <option value="is null">为null</option>
                            <option value="is not null">不为null</option>
                        </select>
                    </div>
                    <div class="sin_val">

                    </div>
                    <div class="sin_op">
                        <img src="css/images/2.png" alt="Remove" class="remove head">
                    </div>
                </div>
                <div class="sin_con">
                    <div class="sin_key">
                        <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                                data-mobile="true">
                            <optgroup label="user1">
                                <option value="user1.id">编号</option>
                                <option value="user1.name">姓名</option>
                            </optgroup>
                            <optgroup label="user2">
                                <option value="user2.id">编号</option>
                                <option value="user2.name">姓名</option>
                            </optgroup>
                        </select>
                    </div>
                    <div class="sin_connect">
                        <select style="cursor:pointer" class="form-control selectpicker bs-select-hidden mobile-device"
                                data-mobile="true">
                            <option value="=">等于</option>
                            <option value="!=">不等于</option>
                            <option value="<">小于</option>
                            <option value="<=">小于等于</option>
                            <option value=">">大于</option>
                            <option value=">=">大于等于</option>
                            <option value="between">在..范围之内</option>
                            <option value="not between">不在..范围之内</option>
                            <option value="is null">为null</option>
                            <option value="is not null">不为null</option>
                        </select>
                    </div>
                    <div class="sin_val">
                        <input id="numInput" class="form-control" placeholder="请输入名称" type="text"
                               style="ime-mode:disabled;">
                    </div>
                    <div class="sin_op">
                        <img src="css/images/2.png" alt="Remove" class="remove">
                    </div>
                </div>
            </div>
            <!--<div class="op_add">-->
                <!--&lt;!&ndash;<img  class="add" style="cursor:pointer" src="css/images/add.gif" alt="添加新行">&ndash;&gt;-->
                <!--<span class="label label-primary">添加新行</span>-->
                <!--<span class="label label-success">新组</span>-->
            <!--</div>-->
        </div>
    </div>
    <button type="button" class="btn btn-primary btn-lg">获取SQL</button>

    <!--浮动的详细信息-->
    <div class="detail_info" id="box_detail"></div>
</div>
</body>
</html>